<template>
  <div class="waste-label-box ">
    <el-button type="primary" plain @click="handleShowDetail(1)">+新建申领</el-button>
    <el-button type="success" size="small" icon="el-icon-refresh-right" @click="handleGetLis">刷新</el-button>

    <div class="label-table">
      <el-table
        v-if="lis.length > 0"
        :data="lis"
        stripe
        border
        height="100%" 
        style="width: 100%"
        :row-class-name="handleSetRowClass"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          label="申领时间"
          prop="ctime"
          width="120"
          align="center"
        ></el-table-column>

        <el-table-column
          label="申领账号"
          prop="account"
          align="center"
        ></el-table-column>

        <el-table-column
          label="用户名"
          prop="username"
          align="center"
        ></el-table-column>

        <el-table-column
          label="申领科室"
          prop="ks"
          align="center"
        ></el-table-column>

        <el-table-column
          label="类型"
          align="center"
        >
          <el-table-column
            v-for="(item,index) in table_col"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            align="center"
          >
            
          </el-table-column>

        </el-table-column>

        <el-table-column
          label="备注"
          prop="remark"
          align="center"
        ></el-table-column>

        <el-table-column
          label="状态"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.statu == 0">
              <span>已发送</span>
               <el-button type="text" size="small" @click="handleShowDetail(0,scope.row)">编辑</el-button>
            </template>
            <span v-else-if="scope.row.statu == 1">已确认</span>
            <span v-else>用户已取消</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="empty" v-else>暂无数据</div>
    </div>

     <el-dialog :title="is_created ? '新建申领':'编辑申领'" :visible.sync="detail_visible" class="waste-label-pop">
       <LabelDetail v-if="detail_visible" :data="info" @onclose="handleClosePop" />
     </el-dialog>

  </div>
</template>

<script>
import LabelDetail from './sub/LabelDetail.vue'
import { getWasteLabelLisUrl } from "../../common/ajax"
export default {
  components:{
    LabelDetail
  },
  data(){
    return {
      is_created: false,
      detail_visible: false,
      lis:[],
      table_col:[],
      info: {},
    }
  },
  created(){
    this.handleGetLis()
  },
  methods:{
    handleShowDetail(s,row){
      if(s==1){
        this.is_created = true
        this.info = {}
      }else{
        this.is_created = false
        this.info = row
      }
      this.detail_visible = true
    },
    handleClosePop(){
      this.detail_visible = false
      this.handleGetLis()
    },
    handleGetLis(){
      jQuery.ajax({
        url:getWasteLabelLisUrl,
        type: 'post',
        data: JSON.stringify({
          select_ks:[],
          statu:"",
          moon:[],
          opt: '1'
        }),
        contentType: "application/json",
        success: res => {
          if(res.success){
            res.data.sort((a,b)=>{
              return b.id - a.id
            })
            res.data.sort((a,b)=>{
              return a.statu - b.statu
            })
            this.table_col = []
            let typeL = []
            res.data.forEach(ele => {
              ele.kind.forEach((v)=>{
                if(!typeL.includes(v.name)){
                  typeL.push(v.name)
                  this.table_col.push({label:v.name,prop:v.name})
                }
              })
            });
            this.lis = res.data.map((ele)=>{
              typeL.forEach(v=>{
                ele[v] = 0
              })
              ele.kind.forEach((v)=>{
                if(typeL.includes(v.name)){
                  ele[v.name] = Number(v.num)
                }
              })
              return ele
            })
          }else {
            throwErrorTips(res.msg)
          }
        },
        error:()=>{
          throwErrorTips("网络超时")
        }
      })
    },
    handleSetRowClass({row, rowIndex}){
      if(row.statu == "2"){
        return "cancel-label"
      }
      return ""
    }

  },
}
</script>

<style lang="less">
@import url("../../assets/less/waste-label.less");
</style>